<template class="parent">
  <div class="child" style="height: 500px">
    <el-container style="margin-right: 700px">
<!--      action="http://192.168.188.129:8777/file/addFile"-->
        <el-upload action="http://192.168.36.14:8777/file/addFile" :limit="3" :data={selectIndex:state.nextPath} :on-success="handleUploadSuccess">
          <el-button type="primary" style="font-size: 20px"><el-icon><CirclePlus /></el-icon>上传文件 <i class="el-icon-circle-plus-outline"></i></el-button>
        </el-upload>
        <el-button type="warning" @click="addfold" style="font-size: 20px"><el-icon><FolderAdd /></el-icon>新建文件夹 <i class="el-icon-circle-plus-outline"></i></el-button>
        <el-button type="success" @click="upStep" style="font-size: 20px"><el-icon><House /></el-icon>返回首页</el-button>
    </el-container>
    <el-table :data="filterTableData" style="font-size: 20px;width:100%;height:470px" :row-style="{height: '20px'}" :cell-style="{padding:'0px'}"
              scrollbar-always-on="true"
              flexible="true"
    >
<!--      <template v-slot="scope">-->
<!--        <el-icon v-if="scope.row.type === 1"><Files /></el-icon>-->
<!--        <el-icon v-if="scope.row.type === 2"><Folder /></el-icon>-->
<!--      </template>-->
      <el-table-column label="文件类型" prop="type" >
        <template v-slot="scope">
          <h2 v-if="scope.row.type === 1"><el-icon><DocumentCopy /></el-icon></h2>
          <h2 v-if="scope.row.type === 2"><el-icon><Folder /></el-icon></h2>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="creatTime" />
      <el-table-column label="文件名" prop="filename" show-overflow-tooltip="true"  />
      <el-table-column label="文件大小" prop="size" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="large" placeholder="请输入文件名" />
        </template>
<!--        <template #default="scope">-->
        <template v-slot="scope">
          <el-button size="large" @click="down(scope.row.filename)" type="success" v-if="scope.row.type === 1"
          ><el-icon><Files /></el-icon>下载</el-button
          >
          <el-button size="large" @click="open(scope.row.filename)" type="primary" v-if="scope.row.type === 2"><el-icon><Folder /></el-icon>打开</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    创建文件夹-->
    <el-dialog v-model="dialogFormVisible" title="创建文件夹" :modal="false" width="40%">
      <el-form :model="state.form" :rules="state.rules" ref="ruleFormRef" style="width: 85%" label-width="120px">
        <el-form-item label="文件名"  prop="status">
          <el-input  v-model="state.form.filename" autocomplete="off" placeholder="请输入文件夹名称"/>
        </el-form-item>
<!--        <el-form-item label="文件路径"  prop="status">-->
<!--          <el-input  v-model="state.form.path" autocomplete="off" placeholder="如 /home/userfile/file"/>-->
<!--        </el-form-item>-->
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          创建
        </el-button>
      </span>
      </template>
    </el-dialog>
<!--    选择下载位置-->
<!--    <el-dialog v-model="dialogVisible" title="选择下载位置" width="40%" :modal="false">-->
<!--      <el-form :model="state.down" ref="ruleFormRef" style="width: 85%" label-width="120px">-->
<!--        <el-form-item label="文件下载路径"  prop="status">-->
<!--          <el-input  v-model="state.down.path" autocomplete="off" placeholder="如 D:/下载/ "/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="down">-->
<!--          下载-->
<!--        </el-button>-->
<!--      </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--    是否覆盖-->
<!--    <el-dialog v-model="dia" title="出现同名文件是否覆盖" width="40%" :modal="false">-->
<!--      <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dia = false">取消</el-button>-->
<!--        <el-button type="primary" @click="fuGai">-->
<!--          覆盖-->
<!--        </el-button>-->
<!--      </span>-->
<!--      </template>-->
<!--    </el-dialog>-->

  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, reactive, ref} from 'vue'
import {Folder, CirclePlus,House,DocumentCopy,FolderAdd,Files} from '@element-plus/icons-vue'
import {ElNotification} from "element-plus";
import request from "../request.js";
import router from "../router/index.js";


// interface User {
//   date: string
//   name: string
//   address: string
// }
interface Files{
  creatTime: string
  filename: string
  size: string
}
const state = reactive({
  form:{},
  down:{},
  nextPath:"",
  upPath:"",
  username:sessionStorage.getItem('username'),
  temp:""
})

const currentPage = ref(1)
const pageSize = ref(1)
const total = ref(0)
const search = ref('')

const dialogFormVisible = ref(false)
const dialogVisible = ref(false)
const dia = ref(false)
const name = ref(null)

const addfold = () => {
  state.form.path = state.nextPath //初始化数据
  dialogFormVisible.value = true
}
const tableData = reactive({
  Files:{}
})




const load = () => {
  if(state.username == null){
    console.log(state.username)
    ElNotification.error("请先登录")
    router.push("/")
  } else {

    request.get("/file/showFile").then(res=>{
      tableData.Files = res;
      console.log(tableData.Files)
    })
  }
}
load()
const filterTableData = computed(() =>
    tableData.Files.filter(
        (data) =>
            !search.value ||
            data.filename.toLowerCase().includes(search.value.toLowerCase())
    )
)


// const handleEdit = (index: number, row: User) => {
//   console.log(index, row)
// }

const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}
const handleUploadSuccess = (res) => {
  console.log(res)
  if(res == true){
    ElNotification.success("上传成功")
    //不返回首页
    request.get("/file/openFolder", {
      params:{
        path: state.nextPath
      }
    }).then(res=>{
      tableData.Files = res;
      //console.log(tableData.Files)
    })

  }else {
    ElNotification.error("上传失败权限不够")
  }
}
// const fuGai = () => {
//
// }

const handleAddFile = (filename) => {
  //name.value = filename
  state.down.filename = filename
  dialogVisible.value=true
}

const save = () => {
  state.form.path = state.nextPath
  request.put("/file/addFolder", state.form).then(res=>{
    if(res == true){
      ElNotification.success("创建成功")
      //load()
      //不返回首页
      request.get("/file/openFolder", {
        params:{
          path: state.nextPath
        }
      }).then(res=>{
        tableData.Files = res;
        //console.log(tableData.Files)
      })

    }else ElNotification.error("创建失败，同名或权限不够")
  })
  dialogFormVisible.value = false
}

const open = (foldername) => {
  state.temp = state.nextPath
  //console.log("temp0 "+state.temp)
  state.nextPath =state.nextPath+"/"+foldername;
  //console.log(state.nextPath)
  request.get("/file/openFolder", {
    params:{
      path: state.nextPath
    }
  }).then(res=>{
    tableData.Files = res;
    //console.log("temp 1"+state.temp+" "+res)
    //console.log("res "+tableData.Files)
  }).catch(onerror=>{
    state.nextPath = state.temp
    ElNotification.error("查询超时!!!")
    //console.log("res2")
  })
}
const down = (filename) => {
  request.get("/file", {
    responseType: 'blob',
    params:{
      name: filename,
      path: state.down.path,
      Zpath: state.nextPath
    }
  }).then(res=>{
    // console.log(res)
    // //load() 不回到首页
    // if(res == true){
    //   ElNotification.success("下载成功")
    // }else {
    //   ElNotification.error("下载失败,路径不存在")
    // }
    console.log(res)
    /* global window */
    const url = window.URL.createObjectURL(new Blob([res]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
  }).catch(err=>{
    ElNotification.error("cuow")
  })
  dialogVisible.value=false
}

const upStep = () => {
  //console.log("点击返回 ")
  request.get("/file/openFolder", {
    params:{
      path: state.upPath
    }
  }).then(res=>{
    tableData.Files = res;
    state.nextPath=state.upPath
    //console.log(tableData.Files)
  }).catch(err=>{
    ElNotification.error("网络拥堵")
  })
}

</script>
<style>
.child {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.parent {
  position:relative;
}



</style>
